<template>
	<view style="padding-bottom: 200upx;">
		<Header :showBack="true" title="商品详情"></Header>
		<view class="box">
			<image v-if="info.prImgUrl" :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + info.prImgUrl" mode="widthFix"></image>
			<view>{{info.prName}}</view>
			<view>{{info.prDescription || ""}}</view>
			<view> <text style="font-size: 20upx;">￥</text> {{info.prRetailPrice}}</view>
		</view>
		<view class="addShopCar">
			<view @click="toShopCar">
				<image src="../../static/gouwuche.png" mode=""></image>
				<view v-if="num>0">
					{{num}}
				</view>
			</view>
			
			<view @click="addShopCar">
				加入购物车
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:getApp().globalData.baseUrl,
				info:{},
				num:0,
			}
		},
		onLoad(e) {
			this.getInfo(e.id)
			this.getShopCar()
		},
		methods: {
			getShopCar(){
				this.$http('/common/api/shopingCart/getOwnerList',{},res=>{
					this.num = res.data.items.length
				})
			},
			toShopCar(){
				uni.reLaunch({
					url:'/pages/shopMall/shopMall?index=2'
				})
			},
			addShopCar(){
				this.$http('/common/api/shopingCart/add',{
					"productId":this.info.id,
					"quantity":1
				},res=>{
					uni.showToast({
						icon:'none',
						title:'加入购物车成功'
					})
					this.getShopCar()
				})
			},
			getInfo(id){
				this.$http('/common/api/commonData/getProduct?id='+id,{},res=>{
					this.info = res.data
				},'POST')
			}
		}
	}
</script>

<style scoped lang="less">
.box{
	>image{
		width: 100%;
		height: auto;
	}
	>view{
		padding-left: 20upx;
	}
	>view:nth-child(2){
		font-weight: 600;
		font-size: 32upx;
		min-height: 60upx;
		line-height: 60upx;
	}
	>view:nth-child(3){
		font-weight: 300;
		font-size: 28upx;
		min-height: 50upx;
		line-height: 50upx;
	}
	>view:nth-child(4){
		font-weight: 600;
		font-size: 36upx;
		min-height: 80upx;
		line-height: 80upx;
		color: #FF524D;
	}
}
.addShopCar{
	position: fixed;
	bottom: 0;
	width: 100%;
	// height: 180upx;
	height: 116upx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 15upx 20upx 0 40upx;
	>view:first-child{
		width: 70upx;
		height: 70upx;
		position: relative;
		>image{
			width: 70upx;
			height: 70upx;
		}
		>view{
			width: 25upx;
			height: 25upx;
			font-size: 20upx;
			text-align: center;
			line-height: 25upx;
			color: #FFFFFF;
			background-color: #DD524D;
			border-radius: 50%;
			position: absolute;
			top: 0;
			right: 0;
		}
	}
	>view:last-child{
		width: 240upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #4abaae;
		color: #FFFFFF;
		font-weight: 300;
		font-size: 28upx;
		text-align: center;
	}
}
</style>
